<template>
    <div class="table-container">
      <!-- 查询条件 -->
      <div class="search-container">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入表名"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="queryParams.tableComment"
          placeholder="请输入表名注释"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
  
      <!-- 表格 -->
      <el-table 
        :data="tableData" 
        style="width: 90%; margin: 20px auto" 
        stripe 
        border 
        highlight-current-row
         @row-dblclick="handleRowDblClick"
      >
        <el-table-column prop="tableName" label="表名"   />
        <el-table-column prop="primaryKey" label="主键"   />
        <el-table-column prop="tableComment" label="表注释"  />
        <el-table-column prop="tableRows" label="数据行数"   />
        <el-table-column prop="fieldCount" label="字段数量"  />
        <el-table-column prop="createTime" label="创建时间"   />
        <el-table-column prop="updateTime" label="更新时间"   />
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, jumper,total"
          :total="total"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          @current-change="handlePageChange"
        />
      </div>

      <!-- 弹窗组件 -->
    <TableDataDialog ref="tableDataDialog" />
      

    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import request from '../utils/request';
  import TableDataDialog from './TableDataDialog.vue';
  
  // 查询参数
  const queryParams = ref({
    tableName: '',
    tableComment: '',
    pageNum: 1,
    pageSize: 15,
  });
  
  // 表格数据
  const tableData = ref([]);
  
  // 总数
  const total = ref(0);

  // 弹窗组件引用
const tableDataDialog = ref(null);
  
  // 查询数据
  const fetchTableInfo = async () => {
    try {
      const response = await request.get('/table/page', {
        params: queryParams.value,
      });
      tableData.value = response.data.records;
      total.value = response.data.total;
    } catch (error) {
      console.error('查询失败:', error);
    }
  };

  // 双击表格行
const handleRowDblClick = (row) => {
  tableDataDialog.value.openDialog(row.tableName,row.primaryKey);
};
  
  // 搜索
  const handleSearch = () => {
    queryParams.value.pageNum = 1; // 重置页码
    fetchTableInfo();
  };
  
  // 重置
  const handleReset = () => {
    queryParams.value = {
      tableName: '',
      tableComment: '',
      pageNum: 1,
      pageSize: 15,
    };
    fetchTableInfo();
  };
  
  // 分页
  const handlePageChange = (pageNum) => {
    queryParams.value.pageNum = pageNum;
    fetchTableInfo();
  };
  
  // 初始化加载
  onMounted(() => {
    fetchTableInfo();
  });
  </script>
  
  <style scoped>
  .table-container {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 10px;
  }
  
  .search-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  
  .pagination-container {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  </style>